<style lang='less' scoped>
 @import '~style/filter.less';
</style>
<template>
    <div>
        <div class="filterForm">
            <div class="filterContBox">
                <div class="filterLabel">产品编码</div>
                <el-input 
                size="small"
                v-model.trim="filterObj.productNo" 
                placeholder="请输入产品编码"
                class="filterInput"
                ></el-input>
            </div>
            <div class="filterContBox">
                <div class="filterLabel">产品名称</div>
                <el-input 
                size="small"
                v-model.trim="filterObj.productName" 
                placeholder="请输入产品名称"
                class="filterInput"
                ></el-input>
            </div>
            <div class="filterContBox">
                <div class="filterLabel">发行方</div>
                <el-select 
                    size="small"
                    clearable
                    class="filterInput"
                    v-model="filterObj.issuerId" 
                    placeholder="请选择">
                    <el-option label='全部' value=""></el-option>
                    <el-option
                        v-for="item in issuerList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </div>
            <div class="filterContBox">
                <div class="filterLabel">上架状态</div>
                <el-select 
                    clearable
                    size="small"
                    class="filterInput"
                    v-model="filterObj.publishStatus" 
                    placeholder="请选择">
                    <el-option label="全部" value=""></el-option>
                    <el-option
                        v-for="item in publishStatusArr"
                        :key="item.name"
                        :label="item.name"
                        :value="item.status">
                    </el-option>
                </el-select>
            </div>
            <div class="filterContBox">
                <span class="filterLabel">上架时间</span>
                <el-date-picker
                    size="small"
                    v-model="createionTimeArr"
                    @change="setDaterange"
                    type="daterange"
                    placeholder="选择日期范围">
                </el-date-picker>
            </div>
        </div>
        <div class="filterButton">
            <el-button type="warning" class="btn" @click='getListData()'>查询</el-button>
            <el-button type="warning" class="btn" @click='goPage("addNewPP")' v-if='getButtonConfig && getButtonConfig.create'>
                <span class="iconfont">&#xe60c;</span> 新增
            </el-button>
        </div>

    </div>
</template>

<script>
    import { mapGetters } from 'vuex'

    import {postCouponList as getCouponList} from 'api/coupon/index.js'
    import{publishStatusArr} from '../config.js'

    export default {
        props:['issuerList', 'getButtonConfig'],
        components:{
        },
        data(){
            return{
                filterObj:{
                    productNo:'',
                    productName:'',
                    issuerId:'',
                    publishStatus:'',
                    dateStart:'',
                    dateEnd:'',
                },
                publishStatusArr:publishStatusArr,
                createionTimeArr:null,//选择的创建起止时间
            }
        },
        methods:{
            async getListData(){
                // console.log(this.filterObj)
                this.$emit('setFilterParams', this.filterObj)
               
            },
            setDaterange(val){
                // console.log(val)
                let startTime =  val ? val.slice(0,10)+ ' 00:00:00' :'',
                    endTime = val ? val.slice(13, val.length) + ' 23:59:59' : '';
                this.filterObj.dateStart = startTime;
                this.filterObj.dateEnd = endTime;
            },
            goPage(name, parm={}, query={}){
                console.log(name)
                this.$router.push({
                    name: name,
                    params:parm,
                    query:query,
                })
            },
        },
        created(){
        },
        mounted(){

        },
  }
</script>